<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>概要统计-活动统计</title>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
<link rel="stylesheet" type="text/css" href="css/active_static.css"/>
</head>

<body>

<div id="wrapper">
	
	<div class="weal-dtlMod">
		<h5 class="title dm-clearfix">
			<span class="txt">概要统计-活动统计</span>
		</h5>
		<div class="data-info dm-clearfix">
			<dl class="data-1">
				<dt class="bt">活动总数</dt>
				<dd class="num">840</dd>
			</dl>
			<dl class="data-2">
				<dt class="bt">砍价活动</dt>
				<dd class="num">420</dd>
			</dl>
			<dl class="data-3">
				<dt class="bt">瓜分红包活动</dt>
				<dd class="num">280</dd>
			</dl>
			<dl class="data-4">
				<dt class="bt">报名活动</dt>
				<dd class="num">140</dd>
			</dl>
		</div>
		
		<div id="echart-7"></div>
		
	</div>
	
	
	
	<div class="weal-dtlMod">
		<div class="date-selMod dm-clearfix" style="padding-top: 20px;">
			<input type="text" readonly="readonly" class="date tc start" onclick="SelectDate(this,'yyyy-MM-dd')" placeholder="-起始日期-" />
			<h5 class="name dm-left">-</h5>
			<input type="text" readonly="readonly" class="date tc end" onclick="SelectDate(this,'yyyy-MM-dd')" placeholder="-结束日期-" />
			<div class="sel_box mid-sel dm-left">
				<select>
					<option value="">活动类型</option>
					<option value="">砍价活动</option>
					<option value="">瓜分红包活动</option>
					<option value="">报名活动</option>
				</select>
			</div>
			<div class="sel_box mid-sel dm-left">
				<select>
					<option value="">战区</option>
					<option value="">班德尔城</option>
					<option value="">无畏先锋</option>
				</select>
			</div>
			<div class="sel_box mid-sel dm-left">
				<select>
					<option value="">加盟商</option>
					<option value="">曹伟</option>
					<option value="">刘玄德</option>
				</select>
			</div>
			
			<input type="button" class="btn bg-m" value="查询" />
			<input type="button" class="btn bg-b" value="导出" />
		</div>
		
		<div class="weal-info tc">
			<table class="dm-table" border="1" bordercolor="#ddd" cellpadding="0" cellspacing="0">
				<tr>
					<th width="50">序号</th>
					<th>活动名称</th>
					<th>活动主图</th>
					<th>活动类型</th>
					<th>有效期</th>
					<th>参与次数</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in activeData">
					<td>{{index+1}}</td>
					<td>{{item.name}}</td>
					<td>
						<div class="cover photo" data-rate='15/8'><img :src="item.cover" alt="" /></div>
					</td>
					<td>{{item.type == 0 ? '砍价' : item.type == 1 ? '瓜分红包' : '报名'}}</td>
					<td>{{item.start + '-' + item.end}}</td>
					<td>{{item.num}}</td>
					<td>
						<a :href="'active_detail.html?activeId='+item.id" class="btn bg-m">查看统计</a>
					</td>
				</tr>
			</table>
		</div>
		
		<div class="pageMod">
			<input type="button" class="first-btn" value="首页" />
			<input type="button" class="prev-btn" value="上一页" />
			<div class="page-box">
				<a class="on">1</a>
				<a>2</a>
				<a>3</a>
				<a>4</a>
				<span>…</span>
				<a>100</a>
			</div>
			<input type="button" class="next-btn" value="下一页" />
			<input type="button" class="last-btn" value="末页" />
		</div>
	</div>
	
</div>

<script src="js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/rate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/date.js" type="text/javascript" charset="utf-8"></script>
<script src="data/data.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

var vm = new Vue({
	el:'#wrapper',
	data:{
		activeData:data.active,
	},
	methods:{
		
	},
	created:function(){
		imgRate();
	},
});

echarts.init($('#echart-7')[0]).setOption({
	    series: [{
	        type: 'pie',
	        radius: '70%',
	        data:[
	            {value:600, name:'砍价： 60%'},
	            {value:200, name:'瓜分红包： 20%'},
	            {value:200, name:'报名： 20%'}
	        ],
	        color:['#1E9FFF','#FF5722','#f2964c'],
	    }]
	});

</script>

</body>
</html>
